<template>
	<div class="top">
		<p>学生详情</p>
		<span @click="back">返回</span>
	</div>
	<div class="info">
		<el-form
		ref="myForm"
		:model="formData"
		:rules="rules"
		style="width:100%;margin-top: 20px;"
		>
		<el-row >
			<el-col :span="10">
				<el-form-item prop="stuName" label="姓名:" label-width="100" style="width:80%">
					<el-input v-model="formData.stuName" placeholder="请输入姓名" style="width:205px"></el-input>
				</el-form-item>
				<el-form-item prop="stuSex" label="性别:" label-width="100" style="width:80%">
					<el-input v-model="formData.stuSex" placeholder="请输入姓名" style="width:205px"></el-input>
				</el-form-item>
				<el-form-item prop="stuTime" label="入学时间:" label-width="100" style="width:80%">
					<el-input v-model="formData.stuTime" placeholder="请输入姓名" style="width:205px"></el-input>
				</el-form-item>
				<el-form-item prop="className" label="班级:" label-width="100" style="width:80%">
					<el-input v-model="formData.clazzName" placeholder="请输入姓名" style="width:205px"></el-input>
				</el-form-item>
				<el-form-item prop="stuAddress" label="籍贯:" label-width="100" style="width:80%">
					<el-input v-model="formData.stuAddress" placeholder="请输入姓名" style="width:205px"></el-input>
				</el-form-item>
				<el-form-item prop="stuNum" label="学号:" label-width="100" style="width:80%">
					 <el-input v-model="formData.stuNum"  placeholder="请输入学号" style="width:205px"></el-input>
				</el-form-item>
				
				</el-col>
				<el-col :span="12">
					<el-form-item prop="stuPerson" label="监护人:" label-width="100" style="width:80%">
						<el-input v-model="formData.stuPerson"  placeholder="请输入监护人" style="width:205px"></el-input>
					</el-form-item>
					<el-form-item prop="stuAge" label="年龄:" label-width="100" style="width:80%">
						<el-input   v-model="formData.stuAge"  placeholder="请输入年龄" style="width:205px"></el-input>
					</el-form-item>
					<el-form-item prop="stuPhone" label="联系方式:" label-width="100" style="width:80%">
						<el-input v-model="formData.stuPhone"  placeholder="请输入联系方式" style="width:205px"></el-input>
					</el-form-item>
					<el-form-item prop="stuNation" label="民族:" label-width="100" style="width:80%">
						<el-input  v-model="formData.stuNation"  placeholder="请输入民族" style="width:205px"></el-input>
					</el-form-item>
					<el-form-item prop="stuHabby" label="兴趣爱好" label-width="100" style="width:80%">
						<el-input  v-model="formData.stuHabby"  placeholder="请输入兴趣爱好" style="width:205px"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script setup lang="ts">
	import { defineEmits,ref,reactive, defineProps,onMounted} from 'vue';
	import {StudentDetail} from "../api/wym"
	import { ElMessage,ElMessageBox} from 'element-plus'

	// 点击返回
	const emit = defineEmits(['changeShow']);
	const back=()=>{
		emit('changeShow');
	}
	
	// 学生id
	const props = defineProps({
		stuId: String
	});
	// console.log(props.stuId)
	
	//学生信息详情
	let formData=reactive({})
	const studentDetail=async()=>{
		let res=await StudentDetail({
			stuId:props.stuId,
		})
		Object.assign(formData,res[0])
		// allAddress=formData.stuAddress
		// showAddress(allAddress)
		// console.log(formData,"学生详情....")
	}
	
	onMounted(()=>{
		studentDetail()
	})
	
</script>

<style scoped lang="less">
	.top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		p{
			font-size: 21px;
			font-weight: 600;
		}
		span{
			font-size: 17px;
		}
	}

	p:hover{
		cursor: pointer;
	}
	.foobtn{
		width: 300px;
		margin: 35px 200px;
		display: flex;
		justify-content:space-between;
	}
	button:hover{
		cursor: pointer;
	}
	.searchBtn{
	    background-color: #106ab1;
	    border: none;
	}
	span:hover{
		cursor: pointer;
	}
</style>